{% layout = "base.html" %}

{-title-}_TLM(Sign up){-title-}

{-content-}
<div class="row">
    <div class="col-sm-3">
    </div>
    <div class="col-sm-6" id="signup">
        <form method="POST" v-on:submit="return signupCheck($event)">
            <div class="form-group">
                <h3>_TLM(Sign up to ViewLyrics.com)</h3>
                <br>
            </div>
            <input hidden name="redirect" type="text" value="{{ redirect }}">
            <div class="form-group row">
                <label for="inputUserName" class="col-sm-4 col-form-label">_TLM(Username)</label>
                <div class="col-sm-8">
                    <input name="username" type="text" class="form-control" id="inputUserName" placeholder="_TLM(Username)"
                        v-model="username">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputEmail" class="col-sm-4 col-form-label">_TLM(Email)</label>
                <div class="col-sm-8">
                    <input name="email" type="email" class="form-control" id="inputEmail" placeholder="_TLM(Email address)"
                    v-model="email">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword" class="col-sm-4 col-form-label">_TLM(Password)</label>
                <div class="col-sm-8">
                    <input name="password" type="password" class="form-control" id="inputPassword" placeholder="_TLM(Password)"
                    v-model="password">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPasswordConfirm" class="col-sm-4 col-form-label">_TLM(Confirm password)</label>
                <div class="col-sm-8">
                    <input v-model="password_confirm" type="password" class="form-control" id="inputPasswordConfirm" placeholder="_TLM(Confirm password)"
                    v-model="password_confirm">
                </div>
            </div>
            <div v-if="error" class="form-group alert alert-danger" role="alert">
                [[ error ]]
            </div>
            <div class="form-group row">
                <div class="col-sm-4">
                    <button type="submit" class="btn btn-primary">_TLM(Sign up)</button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-3">
    </div>
</div>

<script>

var profileApp = new Vue({
	delimiters: ['[[', ']]'],
  	el: '#signup',
  	data: {
        username: decodeHtml('{{ username }}'),
        email: decodeHtml('{{ email }}'),
        password: decodeHtml('{{ password }}'),
        password_confirm: decodeHtml('{{ password }}'),
        error: decodeHtml('{{ error }}'),
    },
	methods: {
        signupCheck: function (event) {
            if (!this.email) {
                this.error = '_TLM(Please input email address.)';
                event.preventDefault();
                return;
            }

            if (!validateEmail(this.email)) {
                this.error = '_TLM(Please input valid email address.)';
                event.preventDefault();
                return;
            }

            this.error = ValidatePasswordChars(this.password);
            if (this.error) {
                event.preventDefault();
                return;
            }

            if (this.password.length < 6) {
                this.error = '_TLM(The password must be at least 6 characters long.)';
                event.preventDefault();
                return;
            }

            if (!this.password || !this.password_confirm) {
                this.error = '_TLM(Please input password and confirm password.)';
                event.preventDefault();
                return;
            }

            if (this.password != this.password_confirm) {
                this.error = "_TLM(The password inputed doesn't match.)";
                event.preventDefault();
                return;
            }
		},
  	}
});

</script>

{-content-}

{-footer-}

{-footer-}
